<template>
	<view class="cart">
		<u-navbar :back="false" :bgColorShow="false" :titleStyle="{opacity:`${Math.round(scrollTopp) / 150}`}" title="购物车"
			:bgColor="`rgba(255,255,255,${Math.round(scrollTopp) / 150})`" />
		<view class="cart-head">
			<view class="card-totie">购物车</view>
			<view class="card-remove" @click="removeChang">
				<view class="remove-icon">
					<u-icon name="trash" size="25" color="#999"></u-icon>
				</view>
				删除
			</view>
		</view>
		<view class="cart-list">
			<cart-item  v-for="item in list" :key="item.id" :item="item"/>
			<listempty mode="car" vh="300px" text="空空如也" :list="list" />
		</view>
		<statusbar :bottom="navigation_h">
			<view class="cart-navigation">
				<view class="navigation-left">
					<view class="navigation-checkbox">
						<u-checkbox-group size="20">
							<u-checkbox @click="ckeactiveEvent" :checked="ckeactive" shape="circle" activeColor="#FFCF4F" :customStyle="{marginBottom: '0px'}"  label="全选"  />
						</u-checkbox-group>
					</view>
					<view class="navigation-pacie">
						{{ckeactPacie}}
						<view class="navigation-badge" v-if="total_num">
							 <u-badge bgColor="#FFCF4F"  max="99" :value="total_num"></u-badge>
						</view>
					</view>
				</view>
				<view class="navigation-right">
					<button :disabled="place_state" class="cu-btn navigation-place" @click="shoppingEvnet">去结算</button>
				</view>
			</view>
		</statusbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTopp: 0,
				checked:true,
				page:0,
				limit:8,
				total_page:0,
				list:[],
				toto_list:[]
			};
		},
		computed:{
			navigation_h(){
				return this.Platform == 'mp-weixin'? '0px':'50px'
			},
			ckeactive(){
				return this.list.length ?this.list.every(item=> item.show):false
			},
			active_list(){
				return this.list.length&&this.list.filter(item => item.show)
			},
			place_state(){
				return this.active_list.length ? false:true
			},
			ckeactPacie(){
				let num = 0
				if(this.list.length){
					this.list.map(item=>{
						num += item.show&& Number(this.pacieView(item)) * item.buy_num
					})
					return num.toFixed(2)
				}
			},
			total_num(){
				let num = 0
				if(this.list.length){
					this.list.map(item=>{
						num +=  item.buy_num
					})
					return num
				}
			}
		},
		onLoad(){
			this.getCartList()
		},
		onShow(){
			if(this.card_show){
				this.getCartList()
			}
		},
		onPageScroll(e) {
			this.scrollTopp = e.scrollTop;
		},
		onReachBottom(){
			if(this.list.length == this.toto_list.length){
				this.$u.toast('已经到底啦')
				return
			}
			this.page += 8
			this.limit = this.page + this.limit
			this.increaseChang()
		},
		methods: {
			pacieView(e){
				if(!e.linkSkuPrice.length){
					return e.price
				}
				if(e.linkSkuPrice.length&&e.linkSkuPrice.length <2){
					return e.linkSkuPrice[0].price
				}
				let obj = e.linkSkuPrice.find(item=> item.id == e.sku_id)
				if (obj) {
					return obj.price
				} else {
					return e.price
				}
			},
			shoppingEvnet(){
				let obj = {
					goods_id:'',
					sku_id:'',
					num:'',
					channel:'cart'
				}
				this.multiRedirect('/subpkg/confirmorder/confirmorder?obj=' + JSON.stringify(obj))
			},
			ckeactiveEvent(){
				if(!this.list.length)return
				let state = false
				let arr = this.list.map(item => item.cart_id)
				if (this.ckeactive) {
					state = false
					this.list.map(item => item.show = false)
				} else {
					state = true
					 this.list.map(item => item.show = true)
				}
				this.$network('/api/goods/cartModInfo', {
					id: arr,
					is_checked: !state ? '0' : '1'
				}).then(res => {
				})
			},
			getCartList(){
				if(!this.vuex_token){
					this.list = []
					return
				}
				this.showLoding()
				this.$network('/api/goods/cartLists').then(res=>{
					if(res.code == 1){
						const { mch_goods_list } = res.data
						if(this.$u.test.array(mch_goods_list)){
							this.page = 0
							this.limit = 8
							const list = mch_goods_list.length ? mch_goods_list[0].goods_list : []
							this.toto_list = list
							this.increaseChang()
						}
					}
				}).finally((e) => {
					this.$u.vuex('card_show',false)
				})
			},
			removeChang() {
				if(!this.list.length)return
				if(!this.active_list.length){
					this.$u.toast('请选择要删除的商品')
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认删除所选中的商品?',
					success: (res) => {
						if (res.confirm) {
							let arr = this.active_list.map(item=> item.cart_id)
							this.$network('/api/goods/cartDel',{
								id:arr
							}).then(res=>{
								if(res.code == 1){
									arr.map(item=>{
										let index = this.list.findIndex(items=>{
											return items.cart_id == item
										})
										this.list.splice(index,1)
									})
									this.$u.toast('删除成功')
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			increaseChang(){
				this.list = this.toto_list.slice(this.page,this.limit).map(item=>{
					return {
						show: item.is_checked ? true : false,
						name: item.name,
						sub_name: item.sub_name,
						price: item.price,
						og_price: item.og_price,
						buy_num: item.buy_num,
						id: item.id,
						img: item.img[0],
						cart_id: item.cart_id,
						freight_money: item.freight_money,
						sku_name:item.sku_name,
						sku_id:item.sku_id,
						linkSkuPrice:item.linkSkuPrice
					}
				})
				this.$nextTick(()=>{
					setTimeout(()=>{
						this.showhideloding()
					},500)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}
	.cart-navigation{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		.navigation-left{
			width: 45%;
			display: flex;
			align-items: center;
			height: 100%;
			.navigation-pacie{
				position: relative;
				margin-left: 25rpx;
				font-size: 40rpx;
				color: #000;
				top: 3px;
				font-weight:550;
				.navigation-badge{
					position: absolute;
					    top: -10px;
					    right: -15px;
				}
			}
		}
		.navigation-right{
			height: 100%;
			.navigation-place{
				position: relative;
				top: 5px;
				width: 180rpx;
				height: 40px;
				border-radius: 24px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #FFCF4F;
				color: #333;
				font-size: 28rpx;
				font-weight: 550;
				padding: 0;
				margin: 0;
			}
		}
	}
	.cart {}

	.cart-list {
		padding: 0 10px 70px 10px;
	}

	.cart-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px 0 10px;

		.card-totie {
			font-size: 40rpx;
			color: #000;
			letter-spacing: 2px;
		}

		.card-remove {
			display: flex;
			align-items: center;

			.remove-icon {
				margin-right: 10rpx;
			}

			font-size:28rpx;
			color: #999;
		}
	}
</style>
